<template>
<!-- 达人详情页 - 关联视频 - 5 125 -->
  <div>
    <div
      id="talentVideo"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false"
      v-if="vipRootObj[5][125].owner"
    >
      <div class="videoBox1">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/dataimg.png" alt="" />
            <span>数据概况</span>
          </div>
          <radio_group01
            v-model="videoDataTime"
            class="mr_16"
            :radio_values="['昨天', '近7天', '30天']"
          />
        </div>
        <div class="theDataBox">
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.video_count) }}</p>
            <p>作品数</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.avg_favorite) }}</p>
            <p>平均点赞</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.avg_comment) }}</p>
            <p>平均评论</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.avg_share) }}</p>
            <p>平均转发</p>
          </div>
        </div>
      </div>
      <div class="videoBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/worksNum.png" alt="" />
            <span>视频作品</span>
          </div>
          <radio_group01
            v-model="videoSort"
            class="mr_16"
            :radio_values="['最新', '点赞']"
          />
        </div>
        <div class="optionsBox">
          <span>发布时间</span>
          <el-date-picker
            class="long_time"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="changeTime"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            :default-value="['2020-10-06', '2020-11-06']"
          >
          </el-date-picker>
          <multi_select v-model="idDel" :options="['屏蔽已删除视频']" />
        </div>
        <div class="searchBox">
          <el-input
            v-model="keyWords"
            placeholder="请输入视频名称或关键词在列表中搜索"
            @keyup.enter.native="toSearch"
          ></el-input>
          <div class="imgBox" @click="toSearch">
            <img src="@/assets/wang/talentCompare/search.png" />
          </div>
        </div>
        <table v-show="!isNoData">
          <thead>
            <tr>
              <th>视频内容</th>
              <th>点赞数</th>
              <th>评论数</th>
              <th>转发数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in talentVideoList" :key="'tv' + index">
              <td>
                <div class="box1">
                  <div class="box1Left">
                    <img
                      :src="item.thum_pic"
                      class="leftImg"
                      v-if="item.is_delete == 0"
                    />
                    <img
                      src="@/assets/meng/hot_video09.png"
                      class="leftImg"
                      v-if="item.is_delete == 1"
                    />
                    <a :href="item.url" target="_blank"
                      ><img src="@/assets/meng/hot_video18.png" class="palyImg"
                    /></a>
                  </div>
                  <div class="box1Right">
                    <p
                      class="rightTitle overflowTextWl"
                      :class="{ delColor: item.is_delete == 1 }"
                      @click="seeDetais(item.aweme_id, '0')"
                    >
                      <span v-if="item.is_delete == 1">已删除或隐藏</span>
                      {{ item.title }}
                    </p>
                    <div class="hotWords">
                      <span>热词:</span>
                      <section v-if="item.hotword.length != 0">
                        <p
                          v-for="(item1, index1) in item.hotword.slice(0, 5)"
                          :key="'hw' + index1"
                          :class="{ delWord: item.is_delete == 1 }"
                        >
                          {{ item1.name }}
                        </p>
                      </section>
                      <span v-else>--</span>
                    </div>
                    <div class="rightText">
                      <span>时长:</span>
                      <span :class="{ delColor: item.is_delete == 1 }">{{
                        format_time(item.duration)
                      }}</span>
                    </div>
                    <div class="rightText">
                      <span>发布时间:</span>
                      <span :class="{ delColor: item.is_delete == 1 }">{{
                        timestamp(item.release_time, "Y-M-D h:m:s")
                      }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <div class="zanBox">
                  <img src="@/assets/meng/l.png" />
                  <span>{{ format_num(item.favorite_count) }}</span>
                </div>
              </td>
              <td>
                <div class="zanBox">
                  <img src="@/assets/meng/c.png" class="cImg" />
                  <span>{{ format_num(item.comment_count) }}</span>
                </div>
              </td>
              <td>
                <div class="zanBox">
                  <img src="@/assets/meng/s.png" class="sImg" />
                  <span>{{ format_num(item.share_count) }}</span>
                </div>
              </td>
              <td>
                <div class="options">
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="视频详情"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <img
                      src="@/assets/wang/video/more.png"
                      @click="seeDetais(item.aweme_id, '0')"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="观众分析"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <img
                      src="@/assets/meng/hot_video02.png"
                      @click="seeDetais(item.aweme_id, '1')"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="播放"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <img
                      src="@/assets/wang/video/play.png"
                      @click="playVideo(item.url)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="收藏"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <img
                      src="@/assets/wang/video/like.png"
                      v-if="item.is_collec == 0"
                      @click="addVideoStar(item.aweme_id, item)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="取消收藏"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <img
                      src="@/assets/wang/video/liked.png"
                      v-if="item.is_collec == 1"
                      @click="cancelVideoStar(item.aweme_id, item)"
                    />
                  </el-tooltip>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-loading="loading"
          v-if="!(talentVideoList.length < (page - 1) * 20) && !needBuy"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <p
          class="nothing"
          v-show="
            talentVideoList.length != 0 &&
            talentVideoList.length < (page - 1) * 20
          "
        >
          我是有底线的～
        </p>
        <div class="empty" v-show="!loading && isNoData">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
        <div class="toBuyWl" v-if="needBuy">
          当前为免费版会员，仅可查看100个结果，立即<span @click="toBuy"
            >升级会员版本</span
          >，可查看更多数据
        </div>
      </div>
      <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <!-- <img :src="$global.staticUrl + 'image/egImg/audience.jpg'" alt="" class="egBgImg" /> -->
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="audience" :lowestVipNum="vipRootObj[5][29].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import pop from "@/pages/meng/video/pop";
export default {
  components: { pop },
  data() {
    return {
      videoDataTime: "近7天",
      videoSort: "最新",
      value1: [],
      idDel: "",
      keyWords: "",
      dataCountObj: "",
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      talentVideoList: [],
      page: 1,
      isNoData: false,
      busy: false,
      loading: true,
      dialog: false,
      video_id: "",
      active_name01: 1,
      // 取消之前未响应的请求
      cancel1: null,
      cancel2: null,
      cancel03: null,
      cancel04: null,
      needBuy: false,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {
    videoDataTime: function (newVal, oldVal) {
      this.getDataCount();
    },
    // 是否屏蔽已删除视频
    idDel: function (newVal, oldVal) {
      this.page = 1;
      this.talentVideoList = [];
      this.getVideoList();
    },
    // 最新 点赞
    videoSort: function (newVal, oldVal) {
      this.page = 1;
      this.talentVideoList = [];
      this.getVideoList();
    },
    // 搜索
    keyWords: function (newVal, oldVal) {
      if (newVal == "") {
        this.page = 1;
        this.talentVideoList = [];
        this.getVideoList();
      }
    },
  },
  created() {
    //当前日期为结束日期
    if(this.vipRootObj[5][29].owner){
      let d = new Date();
      let year1, month1, day1;
      [year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()];
      let date1 = new Date(year1, month1, day1, 7);
      this.value1.push(date1);
      //开始日期设置
      let year2, month2, day2;
      d.setTime(d.getTime() - 90 * 24 * 60 * 60 * 1000);
      [year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()];
      let date2 = new Date(year2, month2, day2, 7);
      this.value1.unshift(date2);
      this.getVideoList();
      this.getDataCount();
    }
  },
  mounted() {},

  methods: {
    toSearch() {
      if (this.keyWords != "") {
        this.page = 1;
        this.talentVideoList = [];
        this.getVideoList();
      }
    },
    changeTime() {
      this.page = 1;
      this.talentVideoList = [];
      this.getVideoList();
    },
    // 视频列表
    getVideoList() {
      let that = this;
      that.loading = true;
      that.needBuy = false;
      let sort = "releasetime";
      if (that.videoSort == "最新") {
        sort = "releasetime";
      } else if (that.videoSort == "点赞") {
        sort = "favoriteCount";
      }
      that.$axios
        .post(
          "/api/aweme/searchaweme",
          {
            keyword: this.trimStr(that.keyWords),
            star_time: that.formatDate(that.value1[0], "yyyy-MM-dd"),
            end_time: that.formatDate(that.value1[1], "yyyy-MM-dd"),
            is_del: that.idDel == "" ? 0 : 1,
            // author_id: "1349824672960131",
            // author_id: "59258131504",
            author_id: that.$route.params.id,
            page: that.page,
            size: 20,
            order_by: "desc",
            // sort: "favoriteCount",
            sort: sort,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel2 != null) {
                that.cancel2();
              }
              that.cancel2 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.page += 1;
            that.talentVideoList = that.talentVideoList.concat(res.data.data);
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);

            if (that.talentVideoList.length != 0) {
              that.isNoData = false;
            } else {
              that.isNoData = true;
            }
          } else if (res.data.code == 1002) {
            that.isNoData = true;
            that.busy = true;
          } else if (res.data.code == 1003) {
            that.busy = true;
            that.needBuy = true;
          }
          that.loading = false;
        })
        .catch((err) => {});
    },
    loadMore() {
      // console.log(11);
      this.getVideoList();
    },
    // 数据
    getDataCount() {
      let that = this;
      let time = "1d";
      if (that.videoDataTime == "昨天") {
        time = "1d";
      } else if (that.videoDataTime == "近7天") {
        time = "7d";
      } else if (that.videoDataTime == "30天") {
        time = "30d";
      } else if (that.videoDataTime == "90天") {
        time = "90d";
      }
      that.$axios
        .get(
          "/api/aweme/searchawemecount",
          {
            params: {
              // author_id: "59258131504",
              author_id: that.$route.params.id,
              time: time,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel1 != null) {
                that.cancel1();
              }
              that.cancel1 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.dataCountObj = res.data.data;
          }
        })
        .catch((err) => {});
    },
    seeDetais(id, index) {
      this.dialog = true;
      this.active_name01 = index;
      this.video_id = id;
    },
    // 播放
    playVideo(url) {
      window.open(url);
    },
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/InsertCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.is_collec = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.is_collec = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#talentVideo {
  width: 100%;
  min-height: 100vh;

  .chartTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 43px;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }
  // 数据概况
  .videoBox1 {
    .theDataBox {
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      border: solid 1px #e5e5e5;
      border: dashed 1px #e5e5e5;
      box-sizing: border-box;
      padding: 47px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 39px;

      .theDataItem {
        width: 25%;
        text-align: center;
        border-right: dashed 1px #e5e5e5;

        p:nth-of-type(1) {
          color: #222222;
          font-size: 26px;
          font-family: DINAlternate-Bold;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          color: #888888;
          font-family: DINAlternate-Bold;
          padding-top: 3px;
        }
      }

      .theDataItem:last-child {
        border-right: none;
      }
    }
  }
  //   视频作品
  .videoBox2 {
    .optionsBox {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 31px;
      span {
        font-size: 14px;
        color: #222222;
        padding-right: 16px;
      }
      .el-date-editor {
        margin-right: 31px;
      }
    }
   
    table {
      width: 100%;
      margin-top: 30px;
      overflow: auto;
      tr {
        text-align: center;
      }
      thead {
        width: 100%;
        background-color: #f5f9ff;
        border-radius: 4px;
        tr {
          height: 48px;
          font-size: 14px;
          color: #555555;
          // th:nth-child(1) {
          //   text-align: left;
          //   padding-left: 28px;
          // }
        }
      }
      tbody {
        tr {
          height: 176px;
          border-bottom: 1px solid #e5e5e5;
          td:nth-child(1) {
            width: 50%;
            text-align: left;
          }
          td:nth-child(2),
          td:nth-child(3),
          td:nth-child(4) {
            width: 10%;
          }
          td:nth-child(5) {
            width: 20%;
          }
        }
      }
      .box1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .box1Left {
          width: 80px;
          height: 116px;
          // background-color: #fd7f2c;
          border-radius: 4px;
          margin-left: 28px;
          margin-right: 22px;
          border: 1px solid #e5e5e5;
          position: relative;
          .leftImg {
            width: 100%;
            height: 100%;
          }
          a {
            display: none;
          }
          .palyImg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .box1Left:hover {
          a {
            display: block;
          }
        }
        .box1Right {
          flex: 1;
          text-align: left;
          .rightTitle {
            box-sizing: border-box;
            font-size: 16px;
            color: #222222;
            font-weight: 600;
            cursor: pointer;
            span {
              display: inline-block;
              width: 100px;
              height: 26px;
              background-color: #f5f5f5;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              font-size: 14px;
              color: #888888;
              text-align: center;
              line-height: 26px;
            }
          }
          .hotWords {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 12px;
            span {
              font-size: 14px;
              color: #888888;
              padding-right: 12px;
              white-space: nowrap;
            }
            section {
              display: inline-block;
              p {
                display: inline-block;
                box-sizing: border-box;
                height: 26px;
                line-height: 26px;
                background-color: #f5f9ff;
                border-radius: 13px;
                border: solid 1px #1779ff;
                font-size: 14px;
                color: #1779ff;
                padding: 0 12px;
                margin-right: 10px;
                overflow: hidden;
                white-space: nowrap;
                margin-bottom: 4px;
              }
            }
          }
          .rightText {
            padding-top: 8px;
            span:nth-child(1) {
              font-size: 14px;
              color: #888888;
              padding-right: 9px;
            }
            span:nth-child(2) {
              font-size: 16px;
              color: #222;
              font-weight: 600;
            }
          }
        }
      }
      .zanBox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        img {
          width: 22px;
          height: 20px;
        }
        span {
          font-size: 18px;
          color: #222222;
          padding-left: 10px;
          font-family: DINAlternate-Bold;
        }
        .cImg {
          width: 20px;
          height: 20px;
        }
        .sImg {
          width: 20px;
          height: 17px;
        }
      }
      .options {
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 32px;
          height: 32px;
          cursor: pointer;
          outline: none !important;
          margin-right: 16px;
        }

        img:last-child {
          margin-right: 0;
        }
      }
    }
    // 已删除视频样式
    .delColor {
      color: #888888 !important;
    }
    .delWord {
      background-color: #f5f5f5 !important;
      color: #888888 !important;
      border: solid 1px #e5e5e5 !important;
    }
  }
}
</style>